<template>
  <div>
    <a-modal title="添加物流账号" :visible="visible" @before-open="open" :on-before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="500px" :mask-closable="false">
      <div>
        <a-form auto-label-width ref="formRef" size="medium" :model="form">
          <a-space direction="vertical" :size="24">
            <a-row>
              <a-col :span="12">
                <a-form-item field="providerType" label="物流商类型" :rules="rules.providerType">
                  <a-select :disabled="type == 'edit'" placeholder="选择服务商" v-model="form.providerType">
                    <a-option label="自定义" value="custom"></a-option>
                    <a-option label="API" value="api"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item v-if="form.providerType == 'api'" :disabled="type == 'edit'" field="providerCode" label="选择服务商" :rules="rules.providerCode">
                  <a-select @change="providerChange" placeholder="选择服务商" v-model="form.providerCode">
                    <a-option v-for="item of providerList" :label="item.name" :value="item.code"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item field="expressName" label="物流名称" :rules="rules.expressName">
                  <a-input v-model="form.expressName" placeholder="请输入物流名称"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="scenceList" label="应用场景" :rules="rules.scenceList">
                  <a-select placeholder="选择应用场景" multiple v-model="form.scenceList">
                    <a-option label="FBA货件物流" value="fbaOrder"></a-option>
                    <a-option label="销售订单物流" value="saleOrder"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-item field="remark" label="备注" :rules="rules.remark">
                  <a-input v-model="form.remark" placeholder="请输入备注名"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="form.providerType && form.providerType != 'custom'">
              <a-col :span="24">
                <a-form-item field="authCode" label="授权码">
                  <a-input style="width: 160px" v-model="form.authCode" placeholder="请输入授权码"></a-input>
                  <a :href="form.authUrl" target="_blank" style="margin-left: 10px; color: #165dfd" v-if="type == 'edit'">点击获取授权码</a>
                </a-form-item>
              </a-col>
            </a-row>
          </a-space>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { saveOrUpdateExpressProvider } from '@/api/warehouse'
  import { Message } from '@arco-design/web-vue'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['type', 'detailInfo'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        form: {},
        rules: {
          providerType: [{ required: true, message: '请选择物流商类型' }],
          providerCode: [{ required: true, message: '请选择服务商' }],
          expressName: [{ required: true, message: '请输入物流名称' }],
          scenceList: [{ required: true, message: '请选择应用场景' }],
          authCode: [{ required: true, message: '请输入授权码' }],
        },
        providerList: [
          { name: 'USPS', code: 'USPS' },
          { name: 'DHL', code: 'DHL' },
          { name: 'FEDEX', code: 'FEDEX' },
          { name: '出口易', code: 'CK1' },
          { name: 'POSTPONY', code: 'POSTPONY' },
        ],
      })

      const open = () => {
        // getUserList()
        console.log(props.detailInfo)

        if (props.type == 'edit') {
          data.form = _.cloneDeep(props.detailInfo)
        }
      }
      const handleOk = (done: any) => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            data.form.enable = true
            let params: any = {
              upsertList: [data.form],
            }
            try {
              const res: any = await saveOrUpdateExpressProvider(params)
              if (res.code == 'SUCCESS') {
                handleCancel()
                Message.success('新增成功')
                visible.value = false
                emit('save')
              }
              done(true)
            } catch (error) {
              done(true)
            }
          } else {
            done(true)
          }
        })
      }
      const handleCancel = () => {
        data.form = {}
        formRef.value.clearValidate()
        visible.value = false
      }

      const providerChange = (val: string) => {
        data.form.providerName = data.providerList.find((e: any) => e.code == val).name
      }
      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        providerChange,
      }
    },
  })
</script>

<style lang="less" scoped></style>
